Vue.component('my-header', {
  template: `
    <header class="header">
      <img :src="logo" class="logo">
      <nav>
        <a :class="{active: active_nav == 0}" href="index.html">首页</a>
        <a :class="{active: active_nav == 1}" href="tcy-detail.html">陶瓷院</a>
        <a :class="{active: active_nav == 2}" href="jingpin.html">馆藏精品</a>
        <a :class="{active: active_nav == 3}" href="shy.html">九文轩书画院</a>
        <a :class="{active: active_nav == 4}" href="cultural-detail.html">文物鉴定</a>
        <a :class="{active: active_nav == 5}" href="syj.html">摄影家协会</a>
        <a :class="{active: active_nav == 6}" href="subject.html">专题活动</a>
        <a :class="{active: active_nav == 7}" href="wccp.html">文创产品</a>
      </nav>
    </header>
  `,
  data() {
    return {
      active_nav: 0,
      logo: 'images/logo.png'
    }
  },
  created() {
    this.init_nav();
    this.aboutUs();
  },
  methods: {
    // 初始化导航栏
    init_nav() {
      switch (location.pathname) {
        case '/tcy-pc':
        case '/tcy-pc/':
        case '/tcy-pc/index.html':
          this.active_nav = 0;
          break;
        case '/tcy-pc/tcy-detail.html':
          this.active_nav = 1;
          break;
        case '/tcy-pc/jingpin.html':
        case '/tcy-pc/jingpin-detail.html':
          this.active_nav = 2;
          break;
        case '/tcy-pc/shy.html':
        case '/tcy-pc/shy-auth.html':
        case '/tcy-pc/shy-detail.html':
          this.active_nav = 3;
          break;
        case '/tcy-pc/cultural-detail.html':
          this.active_nav = 4;
          break;
        case '/tcy-pc/syj.html':
        case '/tcy-pc/syj-auth.html':
        case '/tcy-pc/syj-detail.html':
          this.active_nav = 5;
          break;
        case '/tcy-pc/subject.html':
        case '/tcy-pc/subject-detail.html':
          this.active_nav = 6;
          break;
        case '/tcy-pc/wccp.html':
        case '/tcy-pc/wccp-detail.html':
          this.active_nav = 7;
          break;
      }
    },
    // 关于我们一大堆数据
    aboutUs() {
      ajax(this, 'index/aboutUs').then(res => {
        fixed_img_path(res, 'logo');
        this.logo = res.logo;
      });
    }
  }
});

Vue.component('my-footer', {
  template: `
    <footer class="footer">
      <div class="inner">
        <div class="info">
          <div class="list">
            <ul class="ul1">
              <li class="title">关于我们</li>
              <li><a href="tcy-detail.html">了解我们</a></li>
            </ul>
            <ul class="ul3">
              <li class="title">咨询电话　{{about_us.tel}}</li>
              <li>地址：{{about_us.address}}</li>
            </ul>
          </div>
          <img :src="about_us.logo" alt="" class="footer-logo">
        </div>
        <div class="qrcode-box">
          <img :src="about_us.bwgsd_qrcode" alt="">
          <img :src="about_us.tcy_qrcode" alt="">
        </div>
      </div>
      <div class="copyright">
        Copyright©2018-天津陶瓷院 版权所有. 备案号：<a href="http://www.miitbeian.gov.cn">津ICP备18018917号-1</a>
      </div>
    </footer>
  `,
  data() {
    return {
      about_us: {}
    }
  },
  created() {
    this.aboutUs();
  },
  methods: {
    // 关于我们一大堆数据
    aboutUs() {
      ajax(this, 'index/aboutUs').then(res => {
        fixed_img_path(res, 'logo');
        this.about_us = res;
      });
    }
  }
});

Vue.component('qrcode', {
  template: `
    <div @click="show.value = false" class="qrcode-modal" v-show="show.value">
       <div @click.stop class="qrcode-box">
          <img src="images/qrcode.jpg" alt="">
          <div class="title">扫码进入舞剑小程序</div>
        </div>
    </div>
  `,
  props: ['show'],
  data() {
    return {}
  },
  methods: {}
});